好啦～
這一天總是要來的
幫大家摘要一下

⚠️⚠️⚠️就是跟以前不一樣的⚠️⚠️⚠️
☘️☘️☘️就是類似的或替代品☘️☘️☘️

Lesson 0 - 開場白

• 就做個開場
• 然後介紹了一些學習資源

Lesson 1 - 依然哈囉

• 可以選擇用AS或VSCode
• 要自己下載SDK⚠️⚠️⚠️
• 環境建立的詳細步驟
• 從AS就可以執行iOS模擬器了
• 就算是接實機也可以hot reload⚠️⚠️⚠️

Lesson 2 - 第一印象

• Flutter專案裡還是有iOS跟Android資料夾
• 所以換icon基本上還是跟以前一樣的方法
• 當然你想要兩個平台用不一樣的icon也可以
• 也可以用flutter_launcher_icons方便替換
• iOS還是用LaunchScreen.storyboard☘️☘️☘️
• Android有分：
  launch screens(啟動頁)：等待Android初始化
  splash screens(閃屏頁)：等待Dart初始化

Lesson 3 - 頁面跳轉

• Flutter裡的世界裡什麼都是Widget
  就先把它當成UIView吧☘️☘️☘️
• 有分StatelessWidget 跟 StatefulWidget
  盡量少用StatefulWidget
  除非會根據User或API改變的畫面
• 跟ViewController比較像的東西應該算是Scaffold☘️☘️☘️
• Flutter畫面不能用拉的⚠️⚠️⚠️
• 有一些部分(像是頁面跳轉)會根據不同的平台自動轉換行為
• subview現在叫child/children☘️☘️☘️
• 跳頁的語法也滿像的Navigator.push

Lesson 4 - 畫面佈局

• 關於Layout我感覺：以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊⚠️⚠️⚠️
• 很常用到Column/Row(就是UIStackView☘️☘️☘️)
• Row是水平排列, Column是垂直排列
• Expanded只能在Flex裡使用
• 要把物件重疊就用Stack

Lesson 5 - 容器元件

• 以前iOS沒有下面這些UI類別⚠️⚠️⚠️
• Align讓子widget對齊特定位置(九宮格)
• Padding讓子widget留邊距
• DecoratedBox裝飾子widget, 背景色或實現一些以前要在UIView.layer陰影/邊線/圓角做的事☘️☘️☘️
• SizedBox指定子widget大小
• Container是綜合上述多功能的Widget, 有時候直接用Container省得改來改去

Lesson 6 - 文字顯示與輸入

• Text不是String是UILable⚠️⚠️⚠️
• Text預設會自動折行, 不用怕忘記改行數了⚠️⚠️⚠️
• TextField要透過controller物件才能控制它⚠️⚠️⚠️

Lesson 7 - 按鈕與對話方塊

• 按鈕透過onPressed callback來處理點擊事件
• onPressed為null按鈕就會強制變成disable
• 以前我們在用的UIControl都可以在這裡找到
• Alert要自己呼叫Navigator.pop才會關掉⚠️⚠️⚠️
• 使用async/await才能取得Alert的結果

Lesson 8 - 圖片

• UIImageView就是Image, UIImage就是ImageProvider☘️☘️☘️
• 使用圖片路徑跟副檔名都要⚠️⚠️⚠️
• 內建讀取網路圖片功能⚠️⚠️⚠️

Lesson 9 - 選擇器

• 注意showBottomSheet跟showModalBottomSheet是兩個不一樣的方法

Lesson 10 - 建立列表

• TableView叫List☘️☘️☘️
• cell叫ListTile☘️☘️☘️
• 可以橫的⚠️⚠️⚠️
• 也是要靠scrollController
• 有children(一次全建) 跟 builder(要顯示才建立)兩種建立方式

Lesson 11 - 列表置頂與刷新

• 沒有section的概念⚠️⚠️⚠️
• 置頂header使用sticky_headers套件

Lesson 12 - 列表輸入與折疊

• children方式建立的ListView其TextField上的資料還是會跑掉
• 用ExpansionTile就可以做到folding效果

Lesson 13 - 列表多選與側滑

• 要做多選會用CheckboxListTile
• 側滑選項的話使用flutter_slidable
• 簡單提示訊息可以用SnackBar

Lesson 14 - 網格

• 直接幫你算好cell大小(爽爽的)⚠️⚠️⚠️
• 但是不能paging scroll⚠️⚠️⚠️

Lesson 15 - 特製滾動

• CustomScrollView就像CompositionalLayout☘️☘️☘️
• CustomScrollView裡面一定要用Sliver Widget
• CupertinoSliverRefreshControl就是在CustomScrollView使用

Lesson 16 - 底部導航與頁籤

• BottomNavigationBar這個是TabBar☘️☘️☘️
• TabController這個不是TabBar...在iOS我不知道叫什麼, 就是那個可以用手勢換頁的
• BottomNavigationBar有分fixed 跟 shifting兩種Type
• 注意BottomNavigation超過三個就會轉成shifting
• BottomNavigation的換頁必須自己管理

Lesson 17 - API GET

• 唔...這天沒什麼重點XD, 就介紹一下怎麼轉Model跟打API

Lesson 18 -API POST

• Flutter內建的HttpClient功能比較陽春, POST好像只支援application/json
• 完整一點的可以使用官方出的套件http
• 或是第三方的Dio

Lesson 19 - Life Cycle

![][https://i.imgur.com/lCg6cWh.gif]

• Widget生命週期跟iOS/Android不太一樣, 沒有will/did相關的
• App生命週期要widget透過WidgetsBindingObserver自己監聽

Lesson 20 -InheritedWidget

• UI樹一層包一層, 若底層的widget若想取得上層的state會很麻煩
• InheritedWidget讓底層widget可以方便取得上層的state
• 類似Singleton的作用☘️☘️☘️
• InheritedWidget更新了就會呼叫didChangeDependencies

Lesson 21 -Provider

• 就是進階版的InheritedWidget套件
• 可以做到以前NotificationCenter的效果☘️☘️☘️
• 如果要做到push到2ndVC時TabBar還在
  就要Scaffold/TabBar/TabView整套換成Cupertino
• 如果要做到push到2ndVC時點TabBarItem可以popToRootVC
  就要用navigatorKey去找到navigator再去popUntil

Lesson 22 - Notification

• 也是類似NotificationCenter☘️☘️☘️
• 只是現在方向由下往上
• 畫這個金字塔比實作Notification麻煩XD

Lesson 23 - ImagePicker

• 要另外裝image_picker
• 取得path之後, 透過path拿到File, 再用Image.file顯示

Lesson 24 - Local Storage + URL Launcher

• SharedPreferences就是UserDefault☘️☘️☘️
• url_launcher就像openURL☘️☘️☘️
• 不過開網頁不是外開Safari了, 而是使用SFSafariViewController⚠️⚠️⚠️

Lesson 25 - Push Notification

• 多圖詳細設定步驟
• 現在憑證都用.p8了

Lesson 26 - Biometric

• 使用local_auth
• 不會拿到拒絕原因(LAError)⚠️⚠️⚠️

Lesson 27 - Map + Location

• 要用Google Maps要先去CGP上面申請API Key
• 有提供my location button
• 要注意要求定位權限的時機要晚一點, 才不會卡在過場動畫

Lesson 28 - flutter_turtle

• 體驗Zonble大大有趣的side project
• 詳細介紹可以看看他本人寫的這篇Medium

結語

• 超級推薦《Flutter實戰》這本電子書
  又詳細又豐富
• 手機跨平台討論群(LINE)
• 對Android有興趣的朋友可以右轉iOS Developer Learning Android
• 官網簡中版有中英對照
• Flutter寫起來真的爽度滿高的
  感覺code都輕量化了
  不用在那邊拉來拉去了
  邊寫邊hot reload也很方便
• 不過要用在正式產品上還是會怕怕的, 尤其是金流/影音類
• 可是要是團隊要推, 我會很樂意使用
• 萬物皆Widget
• Widget真的超多種的(300多種)
  不過也代表很多東西不用自己刻了
• 超容易寫出波動拳的
  可以參考一下這篇看看人家推薦怎麼寫
• 要加;號結尾喔～
• Cupertino就是iOS風格的意思
• 使用declarative(聲明式) UI
• FWW - Google每週一分鐘介紹一個Widget
• Flutter有自己的套件網站
• 有一些部分(像是頁面跳轉)會根據不同的平台自動轉換行為
• 關於Layout我感覺：以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊⚠️⚠️⚠️
• enum竟然不能直接用 .xxx 賦值⚠️⚠️⚠️
• Widget本身沒有backgroundColor屬性
• Text不是String是UILable⚠️⚠️⚠️
• 跟js一樣使用async/await
• 推薦這個開源的App
• 推薦老孟的Widget大全
• 今年的iPlayground研討會，小弟有幸分享上台「iOS、Android、Flutter超級比一比」主題
  有興趣的可以參考一下